<script setup lang="ts">
import { onMounted, ref } from 'vue';
import emitter from '../../mitt';
import {getCheckLog} from '../../api/index'
import { ElMessage } from 'element-plus';
type propst = {
  title:string
}
let dialogFormVisible = ref(false)
let isDottShow = ref(false)
let tableData = ref<any>([])
const props = withDefaults(defineProps<propst>(),{
  title:'工兵第72旅机关信息资料室'
}) 
const goBack = ()=>{
  // TODO跳转到当前后台
  // window.location.href = 'http://1.94.185.57/index'
  window.open('http://1.94.185.57/index', '_blank');
}

const handelShowTip = ()=>{
  getCheckLog().then((res:any)=>{
    if(res.code === 200) {
      console.log(res);
      tableData.value = [{
        date: '库存检查数量',
        name: res.data.warehouseNum
      },
      {
        date: '入库检查数量',
        name: res.data.inventoryNum
      },
      {
        date: '请领记录检查数量',
        name: res.data.receiveNum
      },
      {
        date: '归还记录检查数量',
        name: res.data.returnNum
      },
      {
        date: '监查记录检查数量',
        name: res.data.monitorNum
      }
    ]  
    dialogFormVisible.value = true;
    isDottShow.value = false    
    } else {
      ElMessage.error(res.msg)
    }
  })
  
}

onMounted(()=>{
  emitter.on('checkOk',()=>{
    isDottShow.value = true
  })
})
 
</script>

<template>
  <div class="header-main">
    <span class="head-title">{{props.title}}</span>
    <img src="../../assets/img_1.png" width="100%" alt="">
    <el-dropdown>
      <span style="color:#fff;position: absolute;right: 5vw;white-space: nowrap;top: 3vh;">当前用户：张锦浩</span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="goBack">进入后台</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-badge style="position: absolute;right: 3vw;top: 3vh;" class="item" :is-dot="isDottShow">
      <el-icon style="color: orange;cursor: pointer;" @click="handelShowTip"><Bell /></el-icon>
    </el-badge>
  </div>
  <el-dialog v-model="dialogFormVisible" title="通知" width="500">
    <el-table :data="tableData" style="width: 100%" :stripe="false" class="my-custom-table">
      <el-table-column prop="date" label="检查项"/>
      <el-table-column prop="name" label="今日检查次数">
        <template #default="scope">
          <span style="color: #00ff00;margin-right: 10px;display: inline-block;">{{ scope.row.name }}</span>
          <el-icon v-if="scope.row.name == 0" :size="9" :color="'red'">
            <Warning />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer" style="width: 100%;display: flex;justify-content: center">
        <el-button @click="dialogFormVisible = false" type="primary">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.header-main{
  width: 100vw;
  overflow: hidden;
  height: 8vh;
  z-index: 1;
  display: block;
  margin-bottom: -1px;
  position: relative;
  .head-title{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 35px;
    align-items: center;
    text-shadow: 
        0 0 5px rgba(235, 251, 255, 0.5),
        0 0 10px rgba(235, 251, 255, 0.5),
        0 0 15px rgba(235, 251, 255, 0.5),
        0 0 20px rgba(235, 251, 255, 0.5);
  }
}
</style>
